<template>
	<view class="y-flex y-row y-align-center mt-20 mb-20" :style="{'margin-left': _pixelunit(marginGap), 'margin-right': _pixelunit(marginGap)}">
		<view class="y-flex-1 y-flex y-row y-align-center pl-30 pr-30" :style="{'background-color': skinColor.color_gap_2, 'height': '70rpx'}">
			<com-icon name="search" size="30" :color="skinColor.color_3"></com-icon>
			<input class="y-flex-1 fs-26 ml-20" confirm-type="search" type="text" placeholder="输入关键词搜索" :value="value" @input="handleInput" :style="{color: skinColor.color_1}" @confirm="handleConfirm">
			<com-icon name="round_close_fill" class="ml-20" :style="{'visibility': value.length > 0 ? 'visible' : 'hidden'}" size="35" :color="skinColor.color_gap_1" @click="handleClear"></com-icon>
		</view>
		<text class="fs-30 ml-30" :style="{color: skinColor.color_1}" @tap="handleConfirm">搜索</text>
	</view>
</template>

<script>
	import { pixelunit } from '@/assets/js/util.js'
	export default {
		inject: ['getSkinColor'],
		props: {
			value: {
				type: String,
				default: ''
			},
			marginGap: {
				type: [Number, String],
				default: ''
			}
		},
		computed: {
			skinColor () {
				return this.getSkinColor()
			}
		},
		methods: {
			handleConfirm () {
				this.$emit('confirm')
			},
			handleClear () {
				this.$emit('input', '')
			},
			handleInput (e) {
				this.$emit('input', e.detail.value)
			},
			_pixelunit (size) {
				return pixelunit(size)
			}
		}
	}
</script>

<style>
</style>